<template>
  <div class="processGridTree" :class="{showTree:!showTree}">
    <div class="tree-box" v-show="showTree">
      <!-- <el-input class="_input" placeholder="输入关键字" v-model="filterText"></el-input> -->
   <!--   <div v-if="pageFlag==3">
        <el-form ref="form" :model="seleteform" label-width="40px">
          <el-form-item label="业态">
            <el-select v-model="seleteform.businessType" @change="selectBusinessType" size="mini">
              <el-option
                v-for="item in businessTypeOp"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
      </div>-->
      <el-tree
        class="tree"
        :highlight-current="true"
        :props="props"
        :data="gridData"
        accordion
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        node-key="id"
        lazy
        :load="loadChildren"
        @check="handleCheck"
        ref="tree2"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <!--<span v-if="pageFlag==1">
            <el-button type="text" size="mini">{{data.isDept==1?"组织":"网格"}}</el-button>
          </span>-->
        </span>
      </el-tree>
    </div>
    <!--<div class="folding-tree" @click="toShowTree">
      <i class="el-icon-arrow-left" v-if="showTree"></i>
      <i class="el-icon-arrow-right" v-else></i>
    </div>-->
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "processGridTree",
  //props: ["pageFlag", "showTree"], // 1 公司网格；2 工艺网格；3 网格配置工艺
  data() {
    return {
      treeData: new Array(), //  当前组织的临时数据源
      filterText: "",
      defaultProps: {
        //  当前组织树的信息
        children: "children",
        label: "name"
      },
      currentNode: null,
      props: { label: "name", children: "templateChildren", isLeaf: "isLeaf" },
      loadNode: [],
      seleteform: {
        businessType: ""
      }, //搜索条件
      businessTypeOp: [],
      templateType: "1065513713916121088",
      firstNode: null,
      firstResolve: null,
      gridData: []
    };
  },
  computed: {
    ...mapState(["basicQueryObj"])
  },
  created() {
    if (this.pageFlag == 3) {
      this.businessTypeOp = this.utils.dealOption(this.basicQueryObj["业态"]);
      this.seleteform.businessType = this.businessTypeOp[0]["value"];
      this.getAllList();
    }
  },
  mounted() {
    //   this.initial();
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.currentNode = data;
    },
    // 选择业态时触发
    selectBusinessType(val) {
      // this.loadNode = [];

      // this.firstNode.childNodes = [];
      // this.loadChildren(this.firstNode, this.firstResolve);
      this.getAllList();
    },
    querydep() {
      return new Promise(resolve => {
        let url = "";
        let treeData0 = {};
        //if (this.pageFlag == 1) {
          // 公司网格
          url = `/GridNode/childList.htm?id=${localStorage.getItem(
            "corpCode"
          )}&recursive=0`;
       /* } else if (this.pageFlag == 2) {
          // 工艺网格
          url = "";
          treeData0 = defaultData.processTreeData;
        } else if (this.pageFlag == 3) {
          // 工艺网格
          url = `/template/list.htm?templateType=${this.seleteform.businessType}`;
        } else {
          resolve([]);
        }*/
        this.$api.get(url).then(res => {
          res.data.forEach(item => {
            item.isLeaf = item.subnumber === 0 ? true : false;
          });
          resolve(res.data);
          this.currentNode = res.data[0];
          if (res.code !== 0) {
            this.$message({
              type: "error",
              message: `查询失败：${res.description}`
            });
          }
        });
      });
    },
    handleCheck() {
      let checkedData = this.$refs.tree2.getCheckedNodes();
      this.$emit("checkedTreeData", checkedData);
    },
/*    toShowTree() {
      // this.showTree = !this.showTree;
      let tShowTree = this.showTree;
      this.$emit("update:showTree", !tShowTree);
    },*/
    // 加载子树
    loadChildren(node, resolve) {
      if (node.level === 0) {
        this.firstNode = node;
        this.firstResolve = resolve;
        this.querydep().then(res => {
          return resolve(res);
        });
        return;
      }

      let flag = true;
      // 添加到懒加载数据，以便更新
      this.loadNode.forEach(item => {
        if (node.data.id === item.node.data.id) {
          flag = false;
        }
      });
      if (flag) {
        let obj = new Object();
        obj.node = node;
        obj.resolve = resolve;
        this.loadNode.push(obj);
      }

      this.getChildren(node.data).then(res => {
        if (res.code === 0) {
          res.data.forEach(item => {
            item.isLeaf = item.subnumber === 0 ? true : false;
          });
          resolve(res.data);
          this.handleCheck();
        } else {
          this.$message({
            type: "error",
            message: `查询失败：${res.description}`
          });
        }
      });
    },
    //刷新懒加载的数据
    refreshLoad() {
      this.loadNode.forEach(item => {
        this.loadChildren(item.node, {}, item.resolve);
      });
    },

    //获取子集数据
    getChildren(row) {
      return new Promise(resolve => {
        let childList = new Array();
        let url =`/GridNode/childList.htm?id=${row.id}&recursive=1`
        /*  this.pageFlag == 1
            ? `/GridNode/childList.htm?id=${row.id}&recursive=1`
            : this.pageFlag == 2
            ? ""
            : this.pageFlag == 3
            ? `/template/childList.htm?id=${row.id}`
            : "";*/
        this.$api.get(url).then(res => {
          resolve(res);
        });
      });
    },
    // 获取全部网格模板的数据
    /*getAllList() {
      //let url = `/template/list.htm?templateType=${this.seleteform.businessType}`;
      //this.$api.get(url).then(res => {
      let res = {
        list:[
        ],
        pageNo: 1,
        pageSize: 15,
        totalNumber: 6,
        totalPage: 1,
        description: "操作成功",
        status: 0,
        token: null,
      }
        if (res.code === 0) {
          this.gridData = res.data;
        }
      //});
    }*/
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    },
    pageFlag: {
      handler(val) {
        if (val) {
          // this.initial();
        }
      }
    },
    currentNode: {
      handler(val) {
        if (val) {
          this.$emit("sendTreeData", val);
        }
      },
      deep: true
    }
  }
};
</script>
<style lang="less" scoped>
.processGridTree {
  float: left;
  width: 20%;
  height: 100%;
  overflow: auto;
  // border-right: 1px solid #dddddd;
  position: relative;
  // .custom-tree-node {
  //   flex: 1;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   font-size: 14px;
  //   padding-right: 20px;
  // }
  .el-divider--horizontal {
    margin: 5px 0;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .tree-box {
    height: 100%;
    width: calc(100% - 14px);
    border-right: 1px solid #dddddd;
  }
  .folding-tree {
    position: absolute;
    line-height: 56px;
    height: 56px;
    width: 14px;
    top: 40%;
    right: 1px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
  }
  .folding-tree:hover {
    cursor: pointer;
    background-color: #fafafa;
  }
}
.showTree {
  width: 16px;
}
</style>


